<template>
	<div class="reg">
		<div class="main">
			<div class="line"></div>
			<div class="title">
				注册
			</div>
			<div class="content">
				<form action="">
					<input class="item" type="text" placeholder="请输入手机号" v-model="phone"/>
					<div class="btn">
						<input type="text" placeholder="请输入验证码" />
						<button plain="true">获取验证码</button>
					</div>
					<input class="item" type="text" placeholder="请输入密码" v-model="password"/>
					<input class="item" type="text" placeholder="请输入邀请码(非必填)"/>
                    <br>
					<button  type="button" @click="goRegister" class="btn1">注册</button>
				</form>
			</div>
		</div>
	</div>
</template>
<script setup  lang="ts">
import { Token } from '@/utils/request'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const $router = useRouter()
const phone = ref('')
const password = ref('')
import { showToast } from 'vant'
const goRegister = () => {
	     if (!phone.value) {
			showToast({
				message: '请输入手机号',
				duration: 1500,
				forbidClick: true,
				className: 'showToast'
			})
	     if (!password.value) {
			showToast({
				message: '请输入密码',
				duration: 1500,
				forbidClick: true,
				className: 'showToast'
			})
	     }
		}
		else{
			Token('/api/reg', 'post', {
			phone: phone.value,
			password: password.value
		}).then((res: any)=> {
			if(res.status === 200){
				localStorage.setItem('token', res.data.token)
				$router.push('/login')
			}
		})
		}
		
	
}
</script>
<style lang="less" scoped>
.reg {
	height: 93.4vh;
	background-color: #F8F8F8;

	.main {
		width: 90%;
		margin: 0 auto;

		.line {
			height: 60px;
		}

		.title {
			font-size: 50px;
			font-weight: 700;
			color: #333333;
			margin-bottom: 40px;
		}

		.content {
			.btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: none;
				outline: none;

				margin-bottom: 50px;

				button {
					width: 300px;
					font-size: 30px;
					text-align: center;
					border: none;
					color: #888;

				}
			}

			.item {
				width: 100%;
				border: none;
				outline: none;
				border-bottom: 2px solid #888;
				padding: 20px 0;
				margin-bottom: 50px;
				border: none;
				outline: none;
			}
		}
	}
}

.btn1 {
	width: 100%;
	height: 90px;
	line-height: 90px;
	background-color: rgb(63, 161, 157);
	color: #fff;
	border-radius: 50px;
	margin: 20px auto;
	border: 1px solid rgb(63, 161, 157);
}
</style>
